<template>
  <div class="nav-box">
    <p id="p01">{{msg}}</p>
    <input type="button" value="修改msg" @click="changMsg">
  </div>
</template>

<script>

export default {
    name:"NavBar",
    data(){
      return {
        msg:"hi"
      }
    },
    methods:{
      changMsg(){
        this.msg += "1";
        // https://v2.cn.vuejs.org/v2/guide/reactivity.html
        // 深入响应式的原理：
      // vue2中，当数据改变时，并不会理解更新dom。而是会把数据引起的dom更新放在一个异步更新队列里进行排队。
      //         等到下次事件循环更新队列时,才会执行队列的代码(进行dom的处理)，这样的话，意味着程序员没法在更新数据后，使用新的dom
      //         所以,vue提供了一个$nextTick()，只需要程序员把操作新dom的代码传给$nextTick，$nextTick()内部会在dom重新渲染之后，调用传入的代码


        this.$nextTick(()=>{
          // 这个回调函数，会在msg引起的组件渲染完毕后调用。
          console.log(document.getElementById("p01").innerHTML);
        });
        

      }
    },
    // updated(){
    //   console.log(document.getElementById("p01").innerHTML);
    // }
}
</script>

<style scoped>
  .nav-box{
    width: 100%;
    height: 10rem;
    background-color: gray;
  }

</style>